<template>
  <div class="device-status">
    <div class="ds-summary">
      <!-- 已接入卡片 -->
      <div class="ds-card">
        <p class="ds-card-label">已接入设备</p>
        <span class="ds-card-count">146</span>
      </div>
      <!-- 状态组 -->
      <div class="ds-status-group">
        <div class="ds-status">
          <span class="ds-status-label">工作 60</span>
          <span class="ds-status-value"></span>
          <div class="ds-progress ds-progress-blue">
            <div class="ds-progress-bar" style="width: 60%"></div>
          </div>
        </div>
        <div class="ds-status">
          <span class="ds-status-label">待机 70</span>
          <span class="ds-status-value"></span>
          <div class="ds-progress ds-progress-orange">
            <div class="ds-progress-bar" style="width: 0%"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 设备列表 -->
    <div class="ds-device-list">
      <div class="ds-device">
        <div>手工氩弧焊机 <span>0/7</span></div>
        <div>焊条电弧焊机 <span>0/28</span></div>
      </div>
      <div class="ds-device">
        <div>气保焊机 <span>0/5</span></div>
        <div>大马鞍埋弧焊 <span>0/26</span></div>
      </div>
      <div class="ds-device">
        <div>带极堆焊操作机 <span>0/10</span></div>
        <div>小车埋弧焊 <span>0/6</span></div>
      </div>
    </div>
  </div>
</template>
<script>
</script>
<style lang="scss" scoped>
.device-status {
  // width: 3rem;
  background: #0e1a2b;
  color: #c0c7d1;
  font-family: "Microsoft YaHei", sans-serif;
  padding: 20px;
  border-radius: 8px;
  height: 30%;
}

/* 标题样式 */

/* 汇总区域布局 */
.ds-summary {
  // background: red;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

/* 已接入卡片 */
.ds-card {
  background: #172b4d;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  text-align: center;
}
.ds-card-label {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 12px;
  margin-bottom: 4px;
  color: #99a2b0;
  white-space: nowrap;
}
.ds-card-count {
  font-size: 20px;
  font-weight: 700;
  color: #13d7d4b4;
}

/* 状态组布局 */
.ds-status-group {
  margin: 0 1rem;
  display: flex;
  align-items: center;
  // justify-content: space-around;
  gap: 0.5rem;
}

/* 单个状态项 */
.ds-status {
  display: flex;
  flex-direction: column;
  // align-items: flex-start;
}
.ds-status-label {
  font-size: 12px;
  margin-bottom: 4px;
  color: #99a2b0;
}
.ds-status-value {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

/* 进度条容器 */
.ds-progress {
  width: 120px;
  height: 6px;
  background: #2c3e50;
  border-radius: 3px;
  overflow: hidden;
}

/* 进度条动效（条纹动画） */
.ds-progress-bar {
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-size: 20px 20px;
  animation: progressAnimation 2s linear infinite;
}

/* 颜色区分 */
.ds-progress-blue .ds-progress-bar {
  background-color: #1890ff;
}
.ds-progress-orange .ds-progress-bar {
  background-color: #ff9933;
}

/* 设备列表布局 */
.ds-device-list {
  display: flex;
  flex-direction: column;
}
.ds-device {
  font-size: 14px;
  color: #c0c7d1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1rem;
}
.ds-device span {
  color: #99a2b0;
}

/* 动画关键帧 */
@keyframes progressAnimation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}
</style>